import React, { Component } from 'react'
import { Menu } from 'antd'
import { NavLink } from 'react-router-dom'
import MenuLeft from '../../config/menuLeft'
import './index.less'

const SubMenu = Menu.SubMenu

class NavLeft extends Component {

    componentWillMount() {
        const menuTreeNode = this.renderMenu(MenuLeft)

        this.setState({
            menuTreeNode
        })
    }

    // 菜单渲染
    renderMenu = (data) => {
        return data.map(item => {
            if (item.children) {
                return (
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return <Menu.Item title={item.title} key={item.key}>
                <NavLink to={item.key}>{item.title}</NavLink>
            </Menu.Item>
        })
    }

    render() {

        return (
            <div>
                <div className="logo">
                    <img src="/assets/logo-ant.svg" alt="" />
                    <h1>HaiYang CMS</h1>
                </div>
                {/* <Menu theme="dark">
                    <Menu.Item key="1">
                        <span>Option</span>
                    </Menu.Item>
                    <SubMenu key="sub1" title={<span>Navigation One</span>}>
                        <Menu.Item key="2">Option 2</Menu.Item>
                        <Menu.Item key="3">Option 3</Menu.Item>
                        <Menu.Item key="4">Option 4</Menu.Item>
                        <Menu.Item key="5">Option 5</Menu.Item>
                    </SubMenu>
                </Menu> */}
                <Menu theme="dark">
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}

export default NavLeft